<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#LoutiNav{
				
				position: fixed;
				top: 25%;
				left: 40px;
				width:30px;
				border: 1px solid ;
			}
			#LoutiNav ul li{
				position:relative;
				width:30px;
				height:30px;
				list-style:none;
				text-align:center;
				line-height: 30px;
				font-size: 12px;
				cursor: pointer;
				border-bottom: 1px dotted #AAAAAA;
			}
			#LoutiNav ul li.last {
				background: darkred;
				color: white;
				border-bottom: none;
			}
			#LoutiNav ul li span{
				display: none;
				width:30px;
				height: 30px;
				position: absolute;	
				top: 0;
				left: 0;
				color:red;
			}
			#LoutiNav ul li:hover span{
				display: block;
				background: darkred;
				color: white;
			}
			#LoutiNav ul li span.active {
				display: block;
				background: white;
				color: red;
			}
			#LoutiNav ul li:hover span.active{
				display: block;
				background: darkred;
				color: white;
			}
			#header,#main,#footer {
				margin: auto;
				width: 1000px;
				text-align: center;
				font-size: 40px;
				font-weight: bold;
				line-height: 500px;
			}
			
			#main div{
				height: 700px;
				font-size: 50px;
				color: honeydew;
				line-height: 700px;
			}
			
			#header{
				height: 500px;
				background: darkcyan;
			}
			#footer{
				height: 500px;
				background: darkcyan;
			}
		</style>

	</head>

	<body>
		<div id="LoutiNav">
			<ul>
				<li>1F <span>服饰</span> </li>
				<li>2F <span>美妆</span> </li>
				<li>3F <span>手机</span> </li>
				<li>4F <span>家电</span> </li>
				<li>5F <span>数码</span> </li>
				<li>6F <span>运动</span> </li>
				<li>7F <span>居家</span> </li>
				<li>8F <span>母婴</span> </li>
				<li>9F <span>食品</span> </li>
				<li>10F <span>图书</span> </li>
				<li>11F <span>服务</span> </li>
				<li class="last">Top</li>
			</ul>
		</div>

		<!--楼层内容开始-->
		<div id="header">头部</div>
		<div id="main">
			<div class="Louti" style="background: #cc0033;">服饰</div>
			<div class="Louti" style="background: #999933;">美妆</div>
			<div class="Louti" style="background: #ccff33;">手机</div>
			<div class="Louti" style="background: #006633;">家电</div>
			<div class="Louti" style="background: #6666cc;">数码</div>
			<div class="Louti" style="background: #ff6600;">运动</div>
			<div class="Louti" style="background: #ffcc00;">居家</div>
			<div class="Louti" style="background: #3333ff;">母婴</div>
			<div class="Louti" style="background: #ff00cc;">食品</div>
			<div class="Louti" style="background: #669900;">图书</div>
			<div class="Louti" style="background: #ff66cc;">服务</div>
		</div>
		<div id="footer">尾部</div>
		<!--楼层内容结束-->
		<script type="text/javascript" src="../jquery-1.8.3.js" ></script>
		<script type="text/javascript"> 
			//点击楼梯导航
			$('#LoutiNav ul li:not(:last)').click(function(){
				$(this).find('span').addClass('active').end().siblings().find('span').removeClass('active');
				//滚动到楼层内容
//				$(this).index li对应下标
				var _top=$('#main .Louti').eq($(this).index()).offset().top;
				//设置对应div的scrollTop,使滚动条滚动到对应距离
				//给body加对应的scrolltop事件，且document.documentElement对应html,document.body对应body
				//动的滚动条，而不是div
				$('html,body').animate({scrollTop:_top},500);
			})
			//回到顶部
			$('#LoutiNav ul li:last').click(function(){
				//清除其它li的样式
				$(this).siblings().find('span').removeClass('active');
				
				$('html,body').animate({scrollTop:0},500);
			})
			
			//滑动滚动条，楼梯导航也选中到对应位置
			$(window).scroll(function(){
				var _winscrollTop=$(this).scrollTop();
				var scrollIndex=100;
				$('#main .Louti').each(function(){
					if(Math.abs($(this).offset().top-_winscrollTop)<$(this).outerHeight()/2)
						scrollIndex=$(this).index();
				});
				if(scrollIndex!=100){//不等于100，即找到了对应元素
					$('#LoutiNav ul li:not(:last)').find('span').eq(scrollIndex).addClass('active').parent().siblings().find('span').removeClass('active');
				}else{
					//没找到对应元素，就将所有楼层的里样式清除
					$('#LoutiNav ul li:not(:last)')
					.find('span').eq(scrollIndex).removeClass('active');
				}
			});
		</script>
	</body>

</html>
















